<template>
  <div class="freight-manage">
    <!-- 列表 -->
    <el-card>
      <el-button style="margin-bottom: 20px;" type="primary" @click="isAdd">新增模板</el-button>
      <el-table border :data="list" stripe style="width: 100%">
        <el-table-column prop="templateType" label="模板类型" width="180">
          <template v-slot="{ row }">
            <span v-if="row.templateType === 1">同城寄</span>
            <span v-else-if="row.templateType === 2">省内寄</span>
            <span v-else-if="row.templateType === 3">经济区互寄</span>
            <span v-else>跨省</span>
          </template>
        </el-table-column>
        <el-table-column prop="transportType" label="运送类型" width="180">
          <template v-slot="{ row }">
            <span>{{ row.transportType === 1 ? '普快' : '特快' }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="associatedCityList" label="关联城市">
          <template v-slot="{ row }">
            <span v-if="row.associatedCityList[0] === '1'">全国</span>
            <span v-else-if="row.associatedCityList[0] === '2'">京津冀</span>
            <span v-else-if="row.associatedCityList[0] === '3'">江浙沪</span>
            <span v-else-if="row.associatedCityList[0] === '4'">川渝</span>
            <span v-else>黑吉辽</span>
          </template>
        </el-table-column>
        <el-table-column prop="firstWeight" label="首重" width="180" />
        <el-table-column prop="continuousWeight" label="续重" width="180" />
        <el-table-column prop="lightThrowingCoefficient" label="首重" width="180" />
        <el-table-column prop="address" label="操作" align="center" width="110">
          <template v-slot="{ row }">
            <el-link type="primary" @click="doEidt(row)">编辑</el-link>
            <el-divider direction="vertical" />
            <el-link type="danger" @click="doDel(row.id)">删除</el-link>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
    <el-dialog title="提示" :visible.sync="diaShow" width="30%" center>
      <el-form :model="formInfo" label-width="100px" class="demo-ruleForm">
        <el-form-item label="模板类型">
          <el-select v-model="formInfo.templateType" placeholder="请选择活动区域">
            <el-option
              v-for="item of templateTypeOpt"
              :key="item.label"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="运送类型">
          <el-select v-model="formInfo.transportType" placeholder="请选择活动区域">
            <el-option
              v-for="item of transportTypeOpt"
              :key="item.label"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="关联城市">
          <el-checkbox-group
            v-if="!formInfo.associatedCityList.includes('1')"
            v-model="formInfo.associatedCityList"
            :min="1"
          >
            <el-checkbox
              v-for="item of cityListOpt"
              :key="item.label"
              :checked="formInfo.associatedCityList.includes(item.name)"
              :label="item.label"
              :name="item.name"
            />
            <!-- <el-checkbox label="高中时" name="回不去"></el-checkbox> -->
            <!-- <span v-else>全国</span> -->
          </el-checkbox-group>
          <span v-else>全国</span>
        </el-form-item>
        <el-form-item label="首重价格">
          <el-input v-model="formInfo.firstWeight" placeholder="请输入首重价格" />
        </el-form-item>
        <el-form-item label="续重价格">
          <el-input v-model="formInfo.continuousWeight" placeholder="请输入续重价格" />
        </el-form-item>
        <el-form-item label="轻抛系数">
          <el-input v-model="formInfo.lightThrowingCoefficient" placeholder="请输入轻抛系数" />
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="doSubmit">确定</el-button>
        <el-button @click="diaShow = false">取消</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { freighList, changeFreigh } from '@/api/freigh'

export default {
  name: 'FreightManage',
  data() {
    return {
      list: [],
      diaShow: false,
      isEidt: true,
      formInfo: {
        templateType: null,
        transportType: null,
        associatedCityList: [],
        firstWeight: null,
        continuousWeight: null,
        lightThrowingCoefficient: null
      },
      templateTypeOpt: [
        {
          label: '同城寄',
          value: 1
        },
        {
          label: '省内寄',
          value: 2
        },
        {
          label: '经济区互寄',
          value: 3
        },
        {
          label: '跨省',
          value: 4
        }
      ],
      transportTypeOpt: [
        {
          label: '普快',
          value: 1
        },
        {
          label: '特快',
          value: 2
        }
      ],
      cityListOpt: [
        {
          label: '京津冀',
          name: '2'
        },
        {
          label: '江浙沪',
          name: '3'
        },
        {
          label: '川渝',
          name: '4'
        },
        {
          label: '黑吉辽',
          name: '5'
        }
      ]
    }
  },
  async created() {
    this.getData()
  },
  methods: {
    async getData() {
      const res = await freighList()
      console.log(res)
      this.list = res.data
    },
    doEidt(row) {
      this.diaShow = true
      console.log(row)
      this.formInfo = row
    },
    doDel(id) {

    },
    isAdd() {
      this.formInfo = {
        templateType: null,
        transportType: null,
        associatedCityList: ['1'],
        firstWeight: null,
        continuousWeight: null,
        lightThrowingCoefficient: null
      }
      this.diaShow = true
      this.isEidt = false
    },
    async doSubmit() {
      // console.log(this.formInfo.associatedCityList)
      const res = await changeFreigh(this.formInfo)
      console.log(res)
      if (this.isEidt) {
        // this.list = this.list.filter(item=>item)
        this.$message.success('修改成功')
        this.isEidt = true
      } else {
        this.$message.success('添加成功')
        this.list.unshift(res.data)
      }
      this.diaShow = false
      this.getData()
    }
  }
}
</script>
